<!--
 * @description: 
 * @Date: 2022-11-29 16:00:30
 * @example: 
 * @params: 
-->
<template>
  <div class="chatbox">
    <div class="chatContainer">
      <!-- 消息内容 -->
      <div class="about" id="chatBox-content-demo">
        <div
          class="msg"
          v-for="(item, index) in this.msgList"
          :key="index"
        >
          <p class="time">{{ item.dateTime }}</p>
          <Avatar icon="ios-person" size="large" :src="item.Avatar" />
          <span class="name">{{ item.Nickname }}:</span>
          <span class="test">{{ item.msg }}</span>
        </div>
        <div v-if="!this.msgList">
          <!-- <img src="" alt=""> -->
          还没有消息 o
        </div>
      </div>
      <!-- 底部输入框 -->
      <div class="input">
        <!-- 发生输入框 -->
        <div class="input_about">
          <Input
            v-model="msg"
            size="large"
            placeholder="请输入内容"
            style="width: 100%"
            @keyup.enter.native="handleSendBtnClick"
          />
        </div>
        <!-- 发送按钮 -->
        <div class="input_btn">
          <Button type="primary" @click="handleSendBtnClick">发送</Button>
        </div>
      </div>
    </div>
    <!-- 在线情况 -->
    <div class="chatOnline">待研究</div>
  </div>
</template>

<script>
const ws = new WebSocket("ws://kai.anrookie.cn:7878");
export default {
  data() {
    return {
      msg: "",
      msgList: [],
    };
  },
  methods: {
    /** 点击发送消息 */
    handleSendBtnClick() {
      if (this.$store.getters.image && this.$store.getters.Nickname) {
        const msg = this.msg;

        if (!msg.trim().length) {
          this.$Message.error("发生的消息不能为空！");
          return;
        }
        ws.send(
          JSON.stringify({
            id: new Date().getTime(),
            dateTime: new Date().toLocaleString(),
            msg: this.msg,
            Nickname: this.$store.getters.Nickname,
            Avatar: this.$store.getters.image,
          })
        );
        this.msg = "";
      } else {
          this.$Message.error(" 用户信息不足,请到个人中心编辑 个人信息")
      }
    },
    handleWsOpen(e) {
      console.log("FE: WebSocket open", e);
    },
    handleWsClose(e) {
      console.log("FE: WebSocket close", e);
    },
    handleWsError(e) {
      console.log("FE: WebSocket error", e);
    },
    handleWsMessage(e) {
      const msg = JSON.parse(e.data);
      this.msgList.push(msg);
      // /** 持久化聊天记录 */
      // console.log(e.data)
      // this.$store.commit("updatehistory", JSON.parse(e.data));
      // console.log(msg);

    },
    scrollToBottom: function () {
      this.$nextTick(() => {
        var container = this.$el.querySelector("#chatBox-content-demo");
        container.scrollTop = container.scrollHeight;
      });
    },
  },

  mounted() {
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
    this.scrollToBottom();
  },
  created() {
    /** 判断用户是否有 用户信息 如果没有则去注册  */
  },
  updated() {
    this.scrollToBottom();
  },
};
</script>
<style lang="less" scoped>
.chatbox {
  margin: 0 auto;
  width: 80%;
  height: 600px;
  border: 1px solid black;
  display: flex;
  .chatContainer {
    width: 80%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    .about {
      height: 90%;
      border-bottom: 1px solid black;
      padding: 20px;
      overflow: scroll;
      .msg {
        position: relative;
        .name {
          margin-left: 10px;
        }
        .time {
          text-align: center;
        }
        .test {
          border-radius: 20px;
          padding: 10px;
          margin-left: 10px;
          display: inline-block;
          background-color: #f5f7f9;
          position: absolute;
          top: 50px;
          left: 30px;
        }
      }
    }
    .input {
      height: 10%;
      display: flex;
      justify-content: space-between;
      .input_about {
        width: 100%;
        padding: 10px;
      }
      .input_btn {
        width: 20%;
        .ivu-btn {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .chatOnline {
    width: 20%;
    border-left: 1px solid black;
  }
}
</style>
